/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div>
      <div class="fixed-bar">
        <div class="item-title">
          <router-link
            class="back"
            :to="{name:'ad_list', params:{currentPage:$route.params.currentPage}}"
            title="返回列表"
          >
            <i class="fa fa-arrow-circle-o-left"></i>
          </router-link>
          <div class="subject">
            <h3>广告详情</h3>
            <h5>广告编辑</h5>
          </div>
        </div>
      </div>
      <el-form ref="ad" :model="ad" label-width="150px">
        <el-form-item label="广告名称" required>
          <el-input v-model="ad.ad_name" size="mini"></el-input>
          <p class="err-msg" v-if="errResult.ad_name && !ad.ad_name">{{errResult.ad_name}}</p>
        </el-form-item>
        <el-form-item label="广告链接" required>
          <el-input v-model="ad.ad_link" size="mini"></el-input>
          <p class="err-msg" v-if="errResult.ad_link && !ad.ad_link">{{errResult.ad_link}}</p>
        </el-form-item>
        <el-form-item label="广告位置" required>
          <el-select v-model="ad.pid" size="mini" :disabled="true">
            <el-option
              v-for="item in adPosition"
              :key="item.position_id"
              :label="item.position_name"
              :value="item.position_id"
            ></el-option>
          </el-select>
          <p class="err-msg" v-if="errResult.pid && !ad.pid">{{errResult.pid}}</p>
        </el-form-item>
        <el-form-item label="开始日期" required>
          <div class="block">
            <el-date-picker
              v-model="startTime"
              size="mini"
              type="date"
              value-format="timestamp"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="结束日期" required>
          <el-date-picker
            v-model="endTime"
            size="mini"
            type="date"
            value-format="timestamp"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="广告图片">
          <el-upload
            :action="apiHead + '/mall/upload?type=ad'"
            list-type="picture-card"
            :class="{hide:hideUpload}"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="onChangeAdCode"
            :file-list="adCodeImages"
            :on-success="handleAdCode"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <p class="err-msg" v-if="errResult.ad_code && !adCode">{{errResult.ad_code}}</p>
        </el-form-item>
        <el-form-item label="背景颜色" required>
          <div class="block">
            <el-color-picker v-model="ad.bgcolor"></el-color-picker>
          </div>
          <p class="err-msg" v-if="errResult.bgcolor && !ad.bgcolor">{{errResult.bgcolor}}</p>
        </el-form-item>
        <el-form-item label="默认排序">
          <el-input
            v-model="ad.orderby"
            size="mini"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="3"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update()" :loading="isLoading">确认提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import { getAd, getADPosition, updateAd } from "@/utils/api";
export default {
  data() {
    return {
      ad_id: this.$route.params.id,
      ad: {},
      adPosition: [],
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
      adCodeImages: [],
      startTime: new Date().getTime(),
      endTime: new Date().getTime() + (30 * 60 * 60 * 24 * 1000 - 1000),
      adCode: null,
      errResult: {},
      isLoading: false
    };
  },
  created() {
    this.getAD();
    this.getADPosition();
  },
  methods: {
    getAD() {
      var that = this;
      getAd({
        ad_id: this.ad_id
      }).then(function(res) {
        if (res.start_time) {
          that.startTime = res.start_time * 1000;
        }
        if (res.end_time) {
          that.endTime = res.end_time * 1000;
        }
        that.ad = res;
        if (res.ad_code) {
          that.adCodeImages = [{ url: res.ad_code }];
          that.hideUpload = true;
        }
      });
    },
    getADPosition() {
      var that = this;
      getADPosition().then(function(res) {
        that.adPosition = res;
        that.adPosition.unshift({
          position_id: 0,
          position_name: "广告位置 - 所有"
        });
      });
    },
    update() {
      if (!this.startTime) {
        this.$message.error("请选择开始日期");
        return;
      }
      if (!this.endTime) {
        this.$message.error("请选择结束日期");
        return;
      }
      if (this.startTime > this.endTime) {
        this.$message.error("开始日期不能大于结束日期");
        return;
      }
      this.ad.start_time = this.startTime / 1000;
      this.ad.end_time = this.endTime / 1000;
      var that = this;
      this.isLoading = true;
      updateAd(this.ad).then(function(res) {
        if (res.status == 1) {
          that.$message.success({
            message: "更新成功",
            duration: 1000,
            onClose: function() {
              that.$router.push({ name: "ad_list" });
            }
          });
        } else if (res.status == -1) {
          that.$message.error("参数错误");
          that.errResult = res.result;
        } else {
          that.$message.error(res.msg);
        }
        that.isLoading = false;
      });
    },
    handleAdCode(res) {
      this.ad.ad_code = res.result;
      this.adCode = res.result;
      this.$forceUpdate();
    },
    beforeAvatarUpload(file) {
      const isPic =
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPic) {
        this.$message.error("上传图片只能是 JPG、JPEG、PNG、GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isPic && isLt2M;
    },
    onChangeAdCode(file, fileList) {
      this.hideUpload = fileList.length >= 1;
    },
    handleRemove(file, fileList) {
      this.ad.ad_code = "";
      this.adCode = "";
      this.hideUpload = fileList.length >= 1;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
.hide >>> .el-upload--picture-card {
  display: none;
}
>>> .el-input__inner {
  width: 250px;
}
</style>

<!-- <style>
.hide .el-upload--picture-card {
  display: none;
}
>>> .el-input .el-input__inner {
  width: 300px;
}
</style> -->
